---
full_width: 1
title: Leaderboard
---

{% extends "templates/web.html" %}

{% block page_content %}

<section id="leaderboard-header" class="section bg-light" data-section-idx="1" data-section-template="Hero with Right Image">
	<div class="container">
		<div class="hero-with-right-image">
			<div class="hero-content">
				<div>
					<h1 class="hero-title">Leaderboard</h1>
					<p class="hero-subtitle">Checkout who is leading the BRECSA!</p>
					<div>
						<a class="btn btn-lg btn-secondary" href="#leaderboard-section">Explore</a>
					</div>
				</div>
			</div>
			<img alt="" class="image-with-blur hero-image image-loaded" data-src="/assets/bhumi_awards_portal/images/leaderboard.png" src="/assets/bhumi_awards_portal/images/leaderboard.png" height="2000" width="2000">
		</div>
	</div>
</section>

<section id="leaderboard-section" class="section section-padding-top section-padding-bottom">
	<div class="container">
		<div class="row justify-content-center">
			<div id="leaderboard-chart" class="col-sm-9"></div>

			<div class="d-flex flex-column justify-content-center justify-self-center text-center mt-4" class="col-sm-3">
				<p class="h3 text-uppercase text-muted">Total Votes</p>
				<p class="display-3">{{ frappe.get_all('Vote') | length }}</p>
			</div>
		</div>

		<div class="mt-5 d-flex justify-content-between">
			<input id="search-input" type="text" class="form-control w-25" placeholder="Search College">
			<div>
				<button id="refresh-button" class="btn btn-secondary mr-2">
					<svg id="refresh-button-icon" class="icon icon-md">
						<use xlink:href="#icon-refresh"></use>
					</svg>
				</button>
				<a role="button" href="/vote" class="btn btn-primary text-upper">Vote Now</a>
			</div>
		</div>

		<table id="rank-table" class="table mt-5">
			<thead>
				<tr>
					<th scope="col">#</th>
					<th scope="col">College</th>
					<th scope="col">Total Votes</th>
					<th scope="col">Location</th>
				</tr>
			</thead>
			<tbody id="rank-table-body">
				<!-- Will be populated by JS -->
			</tbody>
		</table>

		<nav aria-label="Number of colleges to display" class="d-flex justify-content-center mt-3">
			<ul class="pagination">
				<li class="page-item active"><button class="page-link page-limit-button" href="#">10</button></li>
				<li class="page-item"><button class="page-link page-limit-button" href="#">50</button></li>
				<li class="page-item"><button class="page-link page-limit-button" href="#">100</button></li>
				<li class="page-item"><button class="page-link text-uppercase page-limit-button" href="#">all</button></li>
			</ul>
		</nav>
	</div>
</section>
{% endblock %}

{% block style %}
<style>
	/* https://codepen.io/teerapuch/pen/vLJXeR */
	.spin {
		animation-name: spin;
		animation-duration: 1200ms;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	@keyframes spin {
		from {
				transform:rotate(0deg);
		}
		to {
				transform:rotate(360deg);
		}
	}
</style>
{% endblock %}

<!-- Add a refresh button to refresh the table -->
{% block script %}
	{{ include_script('leaderboard.bundle.js') }}
	<script>
		$('.navbar').addClass('fixed-top');
	</script>
{% endblock %}